<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--查询区-->
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="交易流水号">
                <a-input v-decorator="['transId',{rules: []}]" placeholder="请输入交易流水号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商户号">
                <a-input v-decorator="['merchantNo',{rules: []}]" placeholder="请输入商户号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号">
                <a-input v-decorator="['orderId',{rules: []}]" placeholder="请输入订单号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="订单日期">
                <a-input type="hidden" v-decorator="['orderDate',{initialValue:initOrderDate+'',rules: []}]"/>
                <a-range-picker
                  allowClear
                  :defaultValue="initOrderDate"
                  format="YYYYMMDD"
                  show-time
                  @change="onOrderDateChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="交易状态">
                <a-select show-search placeholder="请选择" v-decorator="['state',{rules: []}]">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(value, key) in this.demo_state" :key="key">
                    ({{ key }}){{ value.dictValue }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--隐藏查询条件-->
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="订单金额">
                  <span :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                    <a-input v-decorator="['orderAmountBegin',{rules: []}]" placeholder="请输入订单金额"/>
                  </span>
                  -
                  <span :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                    <a-input v-decorator="['orderAmountEnd',{rules: []}]" placeholder="请输入订单金额"/>
                  </span>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="银行帐号">
                  <a-input v-decorator="['bankAccountNo',{rules: []}]" placeholder="请输入银行帐号"/>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="创建时间">
                  <a-input type="hidden" v-decorator="['createTime',{initialValue:initCreateTime+'',rules: []}]"/>
                  <a-range-picker
                    allowClear
                    :defaultValue="initCreateTime"
                    format="YYYY-MM-DD HH:mm:ss"
                    show-time
                    @change="onCreateTimeChange"
                  />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                <a @click="() => this.advanced = !this.advanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--全局操作-->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleDownload" v-if="hasPerm('admin:trade:demo:download')">下载</a-button>
        <a-button type="primary" icon="plus" @click="handleAdd" v-if="hasPerm('admin:trade:demo:add')">新建</a-button>
        <a-button type="primary" @click="handleTest" v-if="hasPerm('admin:trade:demo:test')">测试方法</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="delete" @click="handleMenuClick" v-if="hasPerm('admin:trade:demo:delete')">
              <a-icon type="delete"/>
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
        <a-button type="primary" icon="download" @click="handleDownloadTemplate" v-if="hasPerm('admin:trade:demo:upload')">批量导入模板</a-button>
        <a-upload
          name="file"
          :customRequest="handleUpload"
        >
          <a-button type="primary" icon="upload" v-if="hasPerm('admin:trade:demo:upload')">批量导入</a-button>
        </a-upload>
      </div>
      <!--汇总-->
      <a-alert showIcon>
        <template slot="message">
          <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{{ this.selectedRows.length }}</a>记录</span>
          <template v-if="hasPerm('admin:trade:demo:sum')">
            <span style="margin-right: 12px">总订单金额: <a style="font-weight: 600">{{ this.amountFix(this.dataSum.orderAmount, 100, 2) }}</a></span>
            <span style="margin-right: 12px">总手续费: <a style="font-weight: 600">{{ this.amountFix(this.dataSum.orderFee, 100, 2) }}</a></span>
          </template>
        </template>
      </a-alert>
      <!--数据表格-->
      <a-table
        :rowKey=" (record => record.id)"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowSelection="rowSelection"
        :loading="loading"
        :scroll="{ x: 2000, y: 300 }"
        @change="tableChange"
        size="small"
        bordered
      >
        <!--字段扩展显示customRender-->
        <template v-slot:transType="text">
          {{ dictFilter(text,'demo_type') }}
        </template>
        <template v-slot:state="text">
          {{ dictFilter(text,'demo_state') }}
        </template>
        <!--行操作-->
        <template v-slot:action="text, record">
          <span>
            <a href="javascript:" @click="handleInfo(record)" v-if="hasPerm('admin:trade:demo:info')">详情</a>
            <a-divider type="vertical"/>
            <a href="javascript:" @click="handleEdit(record)" v-if="hasPerm('admin:trade:demo:edit')">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" v-if="hasPerm('admin:trade:demo:delete')">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a href="javascript:">删除</a>
            </a-popconfirm>
            <a-divider type="vertical"/>
            <a href="javascript:" @click="handleTest(record)" v-if="hasPerm('admin:trade:demo:test')">测试方法</a>
            <a-divider type="vertical"/>
          </span>
        </template>
      </a-table>
      <!--自定义组件-->
      <save ref="save" @refresh="refresh" />
      <info ref="info" @refresh="refresh" />
    </a-card>
  </page-header-wrapper>
</template>
<script>
  import curdMixins from '@/utils/mixins/curdMixins'
  import { getList, getSum, downloadFile, downloadTemplateFile, uploadFile, deleteByIds, test } from '@/api/trade/demo'
  import save from './save'
  import info from './info'
  export default {
    mixins: [curdMixins],
    components: {
      save,
      info
    },
    data () {
      this.columns = [
        {
          title: '交易流水号',
          dataIndex: 'transId',
          width: 200,
          fixed: 'left'
        },
        {
          title: '交易类型',
          dataIndex: 'transType',
          scopedSlots: { customRender: 'transType' }
        },
        {
          title: '商户号',
          dataIndex: 'merchantNo'
        },
        {
          title: '订单号',
          dataIndex: 'orderId'
        },
        {
          title: '订单日期',
          dataIndex: 'orderDate'
        },
        {
          title: '订单金额',
          dataIndex: 'orderAmount',
          customRender: (value) => {
            value = this.amountFix(value, 100, 2)
            return {
              children: value,
              attrs: {}
            }
          }
        },
        {
          title: '手续费',
          dataIndex: 'orderFee',
          customRender: (value) => {
            value = this.amountFix(value, 100, 2)
            return {
              children: value,
              attrs: {}
            }
          }
        },
        {
          title: '费率',
          dataIndex: 'orderFeeRate',
          customRender: (value) => {
            value = value + '%'
            return {
              children: value,
              attrs: {}
            }
          }
        },
        {
          title: '银行帐号',
          dataIndex: 'bankAccountNo'
        },
        {
          title: '银行户名',
          dataIndex: 'bankAccountName'
        },
        {
          title: '客户手机',
          dataIndex: 'mobile'
        },
        {
          title: '证件号码',
          dataIndex: 'certificateNo'
        },
        {
          title: '交易状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' }
        }
      ]
      return {
        // 多选操作
        multiOperator: [
          {
            key: 'delete',
            method: deleteByIds,
            msg: '批量删除成功'
          }
        ],
        demo_type: {},
        initOrderDate: [this.moment().add(-1, 'd').format('YYYYMMDD'), this.moment().add(1, 'd').format('YYYYMMDD')],
        demo_state: {},
        initCreateTime: [this.moment().add(-1, 'd').format('YYYY-MM-DD'), this.moment().add(1, 'd').format('YYYY-MM-DD')],
        genTemp: null
      }
    },
    created () {
      // 获取字典数据
      this.getDictValue('demo_type').then(res => {
        this.demo_type = res.data
      })
      // 获取字典数据
      this.getDictValue('demo_state').then(res => {
        this.demo_state = res.data
      })
    },
    methods: {
      // 表单参数过滤,mixins调用
      filterForm (values) {
       values.orderAmountBegin = values.orderAmountBegin * 100
       values.orderAmountEnd = values.orderAmountEnd * 100
        return values
      },
      // 列表查询,mixins调用
      list (param) {
        return getList(param)
      },
      // 汇总查询,mixins调用
      sum (param) {
          return getSum(param)
      },
      // 下载list,mixins调用
      download (param) {
        return downloadFile(param)
      },
      // 导入模板下载,mixins调用
      downloadTemplate () {
        return downloadTemplateFile()
      },
      // 导入,mixins调用
      upload (file) {
        return uploadFile(file)
      },
      // 删除,mixins调用
      delete (record) {
        return deleteByIds({ ids: [record.transId] })
      },
      // 自定义方法
      handleTest (param) {
        test(param).then(res => {
          if (res.code === '0000') {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      },
       // 日期格式转换
      onOrderDateChange (date, dateString) {
         this.form.setFieldsValue({ 'orderDate': dateString + '' })
      },
       // 日期格式转换
      onCreateTimeChange (date, dateString) {
         this.form.setFieldsValue({ 'createTime': dateString + '' })
      }
    }
  }
</script>
<style scoped>
</style>
